<template>
    <div class="table-page">
        <div class="table-operation-box">
            <el-button
                type="primary"
                style="margin-bottom: 2em"
                @click="clickLineAdd()"
                >新增action</el-button
            >
            <el-button
                type="primary"
                style="margin-bottom: 2em"
                @click="importRoute()"
                >同步</el-button
            >
        </div>
        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="id"
                default-expand-all
                :tree-props="{
                    children: 'children',
                    hasChildren: 'leaf'
                }"
            >
                <el-table-column
                    prop="id"
                    label="actionCode"
                    min-width="100"
                    align="left"
                >
                    <template slot-scope="scope">
                        <span v-if="!scope.row.edit">{{ scope.row.id }}</span>
                        <el-input
                            v-if="scope.row.edit"
                            v-model="lineDataForm[scope.$index].id"
                        ></el-input>
                    </template>
                </el-table-column>

                <el-table-column prop="name" label="action名称" width="180">
                    <template slot-scope="scope">
                        <span v-if="!scope.row.edit">{{ scope.row.name }}</span>
                        <el-input
                            v-if="scope.row.edit"
                            v-model="lineDataForm[scope.$index].name"
                        ></el-input>
                    </template>
                </el-table-column>

                <el-table-column prop="remark" label="备注" min-width="100">
                    <template slot-scope="scope">
                        <span v-if="!scope.row.edit">{{
                            scope.row.remark
                        }}</span>
                        <div v-if="scope.row.edit" class="xy-center">
                            <el-input
                                v-model="lineDataForm[scope.$index].remark"
                            ></el-input>
                            <el-cascader
                                v-model="lineDataForm[scope.$index].parentId"
                                :options="tableData.filter(v => !v.addAction)"
                                placeholder="上级action"
                                :show-all-levels="false"
                                clearable
                                filterable
                                :props="{
                                    value: 'id',
                                    label: 'name',
                                    emitPath: false,
                                    disabled: 'edit',
                                    checkStrictly: true
                                }"
                                @change="
                                    vl =>
                                        selectParent(
                                            vl,
                                            lineDataForm[scope.$index],
                                            lineDataForm[scope.$index].parent ||
                                                tableData
                                        )
                                "
                            >
                            </el-cascader>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="300" align="center">
                    <template slot-scope="scope">
                        <el-button
                            v-if="!scope.row.edit"
                            class="primary"
                            type="text"
                            size="mini"
                            icon="el-icon-edit"
                            :loading="scope.row.opLoading"
                            @click="clickLineEdit(scope.$index, scope.row)"
                            >编辑
                        </el-button>
                        <el-button
                            v-if="scope.row.edit"
                            class="primary"
                            type="text"
                            size="mini"
                            icon="el-icon-folder-checked"
                            :loading="scope.row.opLoading"
                            @click="
                                clickLineSave(
                                    scope.$index,
                                    scope.row,
                                    '/user/cu/auth/action/update'
                                )
                            "
                            >保存</el-button
                        >
                        <el-button
                            v-if="scope.row.edit"
                            type="text"
                            size="mini"
                            class="warning"
                            icon="el-icon-close"
                            :loading="scope.row.opLoading"
                            @click="clickLineCancel(scope.$index, scope.row)"
                            >取消</el-button
                        >
                        <el-button
                            v-if="!scope.row.edit"
                            type="text"
                            size="mini"
                            class="danger"
                            icon="el-icon-delete"
                            :loading="scope.row.opLoading"
                            @click="
                                tableDelete(
                                    '/user/cu/auth/action/delete',
                                    {
                                        id: scope.row.id
                                    },
                                    true,
                                    () => removeLineData(scope.row)
                                )
                            "
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="pageData.total" class="xy-between table-page-box"></div>
    </div>
</template>

<script>
import Fetch, { post } from "@/api/request.js";
import { TablePage } from "@/layout/mixin/iVue.js";
import { mapState } from "vuex";
import { treeList2Tree, beanCopy } from "@/utils/index.js";
import { asyncRoutes } from "@/router";
export default {
    name: "ActionSetting",
    components: {},
    mixins: [TablePage],
    data() {
        return {
            queryData: {
                size: 1000
            },
            initAddForm: {
                id: null,
                name: null,
                remark: null,
                parentId: null
            }
        };
    },
    computed: {
        ...mapState({})
    },
    mounted() {},
    methods: {
        search(queryData) {
            this.loadTable("/user/cu/auth/action/list", queryData, false).then(
                res => {
                    res = res.map(da => {
                        return {
                            ...da,
                            opLoading: false,
                            edit: false
                        };
                    });
                    this.tableData = treeList2Tree(res);
                }
            );
        },
        async importRoute() {
            await post("/user/cu/auth/action/import", asyncRoutes);
            this.search()
        }
    }
};
</script>

<style lang="scss" scoped></style>
